<div class="map-wrap">
  <ship-legend v-if="!!map" :map="map"></ship-legend>
  <area-history v-if="!!map" :map="map"></area-history>
  <map-draw v-if="!!map" :map="map"></map-draw>
  <div class="content" style="overflow: hidden;">

    <div class="mine" v-if='mapindex==0'>
      <div style="width:280px;position: relative;top:0;display: inline-block;">
        <el-input placeholder="输入船名、mmsi、imo" popper-class="searchInputC"
                  @input="searchShip" v-model="searchKeyword">
          <el-button type="primary" slot="append" @click='searchShip'>搜索</el-button>
        </el-input>
        <div ref="searchList" class="search_list" v-show="showSearchResult">
          <div class="close_box">
            <i class="el-icon-close close_search" @click="closeSearch"></i>
          </div>
          <div v-for="(item, index) in searchResult" class="search_item" @click="showShipDetail(item, true)" v-if="searchResult.length > 0">
            <div class="search_title">{{item.enName}} ({{item.cnName}})</div>
            <div class="search_content">
              <span class="addr">{{item.mmsi}}</span>
              <span style="opacity: 0;">{{item.cnName}}</span>
              <span class="addr">{{isNaN(item.imo) ? '' : item.imo}}</span>
            </div>
          </div>
          <div v-if="searchResult.length === 0" style="line-height: 80px;text-align: center;color: #999;">
            无查询结果
          </div>
        </div>
<!--        <el-autocomplete placeholder="输入搜索内容" popper-class="searchInputC" :fetch-suggestions="querySearchAsync" @input='inputSearch' v-model="searchinfo">-->
<!--          <el-select style="width: 105px;" v-model="select" slot="prepend" placeholder="请选择">-->
<!--            <el-option label="英文船名" value="ship_name_en"></el-option>-->
<!--            <el-option label="MMSI" value="mmsi"></el-option>-->
<!--            <el-option label="IMO" value="ship_imo"></el-option>-->
<!--            <el-option label="中文船名" value="ship_name_cn"></el-option>-->
<!--          </el-select>-->
<!--          <i slot="suffix" @click='searchShipDeatil' class="el-input__icon el-icon-search"></i>-->
<!--        </el-autocomplete>-->
        <ul id='searchsug'>
          <li v-for='(item,index) in searchSugs' @click='chooseSearch(1,item)' v-if='item.id' :key='index'>
            {{item.shipNamecn||item.shipNameEn}}
          </li>
          <li v-for='(item,index) in searchSugs' @click='chooseSearch(item.name)' v-if='item.name' :key='index'>
            {{item.name}}
          </li>
        </ul>
      </div>
      <el-dropdown trigger="click" @command="handleCommandShipTeam">
                            <span class="myteam el-dropdown-link" style="height:38px;margin-left:5px;">
                                <i class="el-icon-plus"></i>我的船队</span>
        <el-dropdown-menu class="dropdown" slot="dropdown">
          <el-dropdown-item v-for="(item,index) of flotillaList" :key="index" :command="item.id">{{item.name}}
          </el-dropdown-item>
          <el-dropdown-item divided command="createShipTeam">创建船队</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--重点区域图标-->
      <el-tooltip class="areaDiv" effect="dark" content="添加重点区域" placement="right">
        <div v-show='mapindex==0' class="el-icon-circle-plus-outline" @click='addImportarea'></div>
      </el-tooltip>

      <!-- 清除轨迹-->
      <div class="topDiv"  style="width:70px;" @click='clearShipTrickClick'>
        <span style="color: #606266;font-size: 14px;">清除轨迹</span>
      </div>

    </div>
    <div class="tabmap">
      <ul>
        <li :class="mapindex==0?'chosed':''" @click="changeMap(0)">海图漫游</li>
        <li @click="changeMap(1)" :class="mapindex==1?'chosed':''">重点区域</li>
        <li @click="changeMap(2)" :class="mapindex==2?'chosed':''">重点船舶</li>
      </ul>
    </div>
    <!--地图切换-->
    <!-- <el-dropdown class="mapCont" @command="handleCommand1">
        <span class="el-dropdown-link maplist">
          {{mapTxt}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">基本</el-dropdown-item>
          <el-dropdown-item command="2">标准</el-dropdown-item>
          <el-dropdown-item command="3">全部</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->

    <!-- <router-view></router-view> -->
    <div id="mapshipmap" v-if='mapindex==0'></div>
    <div v-if="mapindex==1">
      <varea :ddd='gengxin' @qiehuan='qiehuan'></varea>
    </div>
    <div v-if="mapindex==2">
      <vship :ddd='gengxin1' @qiehuan='qiehuan1'></vship>
    </div>
  </div>

  <!--船队信息-->
  <div class="ship-dialog" v-show='shipdetail' ref="shipDetail">
    <h2 class="titleblue" ref="ship_detail_title">
      <span>{{boatinfo.shipNameCn?boatinfo.shipNameCn:'暂无'}}</span>

<!--      <a @click="shipTask(boatinfo)" title="创建任务"><i class="el-icon-circle-plus-outline"></i></a>-->
      <a @click="shipTask(boatinfo)" title="创建任务">任务派发</a>
      <a @click="locateShip" title="定位"><i class="el-icon-map-location"></i></a>
      <a @click="shipClose" title="关闭"><i class="el-icon-close"></i></a>
    </h2>
    <div class="main">
      <div class="main-top">
        <div class="main-left">
          <ul>
            <li>中文船名：{{boatinfo.shipNameCn?boatinfo.shipNameCn:'暂无'}}</li>
            <li>船籍港：{{boatinfo.regportName?boatinfo.regportName:'暂无'}}</li>
            <li>航区：{{boatinfo.sailingareaName?boatinfo.sailingareaName:'暂无'}}</li>
            <li>MMSI：{{boatinfo.mmsi?boatinfo.mmsi:'暂无'}}</li>
          </ul>
        </div>
        <div class="main-right">
          <img src="../../assets/shipship.png">
        </div>
      </div>
      <div class="main-bottom">
        <ul>
          <li class="li-width-100">英文船名：{{boatinfo.shipNameEn?boatinfo.shipNameEn:'暂无'}}</li>
          <li class="li-width-100">船舶编号：{{boatinfo.shipNo?boatinfo.shipNo:'暂无'}}</li>
          <li class="li-width-100">船舶识别号：{{boatinfo.shipId?boatinfo.shipId:'暂无'}}</li>
          <li class="li-width-100">船舶管理人：{{boatinfo.shipOperator?boatinfo.shipOperator:'暂无'}}</li>
          <li>船舶类型：{{boatinfo.shipTypeNameCn?boatinfo.shipTypeNameCn:'暂无'}}</li>
          <li>船舶呼号：{{boatinfo.shipCallsign?boatinfo.shipCallsign:'暂无'}}</li>
          <li>总吨位：{{boatinfo.shipGrosston?boatinfo.shipGrosston+'':'暂无'}}</li>

          <li>净吨：{{boatinfo.shipNetton?boatinfo.shipNetton+'吨':'暂无'}}</li>
          <li>船舶总长：{{boatinfo.shipLength?boatinfo.shipLength+'米':'暂无'}}</li>
          <li>船宽：{{boatinfo.shipBreadth?boatinfo.shipBreadth+'米':'暂无'}}</li>
          <li>客位：{{boatinfo.shipPassengerNum?boatinfo.shipPassengerNum:'暂无'}}</li>
          <li>核定抗风等级：{{boatinfo.shipWindLevel?boatinfo.shipWindLevel:'暂无'}}</li>
          <!-- <li>船舶评价：暂无</li> -->
        </ul>
      </div>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="12">
          <div class="grid-content">
            <el-button type="primary" size='mini' @click="dangerousGoodsDeclaration">危险品申报情况</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <el-button type="primary" size='mini' @click="shipHistryInOutPort">船舶历史进出港</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="space-between" style="margin-top: 10px;">
        <el-col :span="12">
          <div class="grid-content">
            <el-button type="primary" size='mini' @click="shipPSC">船舶安检情况</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content">
            <el-button type="primary" size='mini' @click="shipSafeCertificate">船舶最低安全配员证书</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="main-bottom border-none">
        <ul>
          <li class="li-width-100">AIS信号</li>
          <li class="li-width-100">坐标：{{boatAis.latitudeStr?boatAis.latitudeStr+'N':'暂无'}}&nbsp;&nbsp;&nbsp;{{boatAis.longitudeStr?boatAis.longitudeStr+'E':'暂无'}}</li>
          <li>船首向：{{boatAis.trueheading?boatAis.trueheading+'度':'0度'}}</li>
          <li>航速：{{boatAis.speed?boatAis.speed+'节':'0节'}}</li>
          <li class="li-width-100">
            <span>最新时间：{{boatAis.gpstime?$m(boatAis.gpstime).format('YYYY-MM-DD HH:mm:ss'):'暂无'}}</span>
            <span :style='{color:boatAis.color=="red"?"red":"black"}'>&nbsp;&nbsp;&nbsp;&nbsp;{{makeTimeString(boatAis.gpstime)}}</span>
          </li>
        </ul>
      </div>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <div class="grid-content">
            <el-button type="primary" size='mini' @click="showTrackDialog">轨迹查询</el-button>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content">
            <el-button type="primary" size='mini' v-popover:popover>添加到船队</el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <el-button type="primary" size='mini' @click="addToiship">重点关注</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <!-- 创建船队-->
  <el-dialog
    title=""
    :visible.sync="cteateteamshow">
    <div
      v-loading="shipFleetCreatLoading"
      element-loading-text="创建中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="#ffffffcc"
    >
      <div class="refine_createteam">
        <h2 class="titleblue">创建船队</h2>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row :span="24">
            <el-form-item label="船队名称" :rules="[{ required: true, message: '船队名称不能为空'}]">
              <el-input v-model="form.name" placeholder="请输入船队名称"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createteamAddsure" class="sure">确认</el-button>
        <el-button class="cancel" @click="createteamaddcancel">取消</el-button>
     </span>
      </div>
    </div>
  </el-dialog>

  <!--船舶详情-添加到船队-->
  <el-popover v-model="addToship" placement="left" width="400" trigger="click" ref="popover" popper-class="shipClass">
    <p>添加到船队</p>
    <el-select v-model="flotillaId" class="addShipSel" placeholder="请选择">
      <el-option v-for="item in flotillaList" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    <el-input v-model="boatinfo.id" v-show="false"></el-input> <!-- 为了拿船舶id，通过 v-model 进行父组件中此值的绑定-->
    <div style="text-align: center; margin: 0">
      <el-button type="primary" size="mini" @click="addToSure">确定</el-button>
      <el-button type="primary" size="mini" @click="addToship = false">取消</el-button>
    </div>
  </el-popover>

  <!--轨迹查询-->
  <el-popover v-model="trackDialog" placement="left" width="400" trigger="click" popper-class="shipClass">
    <div
      v-loading="shipTrickLoading"
      element-loading-text="查询中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="#ffffffcc"
    >
      <p>轨迹查询</p>
      <el-row style="margin:20px auto;text-align:center">
        <el-col :span="24">
          <label>开始时间</label>
          <el-date-picker v-model="trackStart" value-format='yyyy-MM-dd HH:mm:ss' type="datetime" placeholder="选择日期时间"
                          class="select-width-220">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row style="margin:20px auto;text-align:center">
        <el-col :span="24">
          <label>结束时间</label>
          <el-date-picker v-model="trackEnd" value-format='yyyy-MM-dd HH:mm:ss' type="datetime" placeholder="选择日期时间"
                          class="select-width-220">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-input v-model="boatinfo.id" v-show="false"></el-input> <!-- 为了拿船舶id，通过 v-model 进行父组件中此值的绑定-->
      <div style="text-align: center; margin: 0;height:35px;">
        <el-button type="primary" size="mini" @click="searchTrack">确定</el-button>
        <el-button type="primary" size="mini" @click="closeTrackDialog">取消</el-button>
      </div>
    </div>
  </el-popover>

  <!-- 点击一个船队后的船队对话框-->
  <el-dialog
    title=""
    :visible.sync="flotillaDialog">
    <div class="refine_flotillaDialog">
      <h2 class="titleblue">我的船队</h2>
      <div class="container">
        <label>船队名称</label>
        <el-input v-model="flotillaId" v-show="false"></el-input> <!-- 为了拿船队id，通过 v-model 进行父组件中此值的绑定-->
        <el-input v-model="flotillaName" disabled class="select-width-280"></el-input>
        <el-button type="primary" @click="editdelete" v-if="flotillaName!='特别跟踪'">编辑船队</el-button>
        <el-button type="primary" @click="teamdelete" v-if="flotillaName!='特别跟踪'">删除船队</el-button>
        <p style="margin: 20px 0;">船舶列表</p>
        <ttable :page='currentPage' :thead="thead" :tdata="tableData" :operate="ooptions" @te="shipcaozuo"></ttable>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          :page-count="totalPage"
          layout="total,prev, pager, next, jumper"
          :total="totalRec"
          background>
        </el-pagination>
      </div>
    </div>
  </el-dialog>

  <!-- 船舶最低安全配员证书 -->
  <el-dialog title="" :visible.sync="safeCertificateDialog" width="80%">
      <div class="refine_createteam">
        <h2 class="titleblue">船舶最低安全配员证书</h2>
        <div class="dialog_content">
          <el-form ref="form" label-width="200px">
            <el-row>
              <el-col :span="12" v-for="(item, index) in shipSafe" :key="index">
                <el-form-item :label="item.label" :prop="item.key">
                  <span>{{handleData(item.key, shipSafeInfo[item.key])}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
  </el-dialog>

  <!-- 船舶安检 -->
  <el-dialog title="" :visible.sync="shipPSCDialog" width="80%">
    <div class="refine_createteam">
      <h2 class="titleblue">船舶安全检查信息</h2>
      <div class="dialog_content">
        <el-table :data="shipPSCData" maxHeight="600" border style="width: 100%">
          <el-table-column v-for="(item, index) in shipPSCRound" :key="index" align="center" :prop="item.key" :label="item.label" :min-width="item.width">
            <template slot-scope="scope">
              <span>{{handleData(item.key, scope.row[item.key])}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="showShipPSCInfo(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>

  <!-- 船舶安检详情查看 -->
  <el-dialog title="" :visible.sync="shipPSCInfoDialog" width="80%">
    <div class="refine_createteam">
      <h2 class="titleblue">船舶安检详情</h2>
      <div class="dialog_content">
        <el-form ref="form" label-width="200px">
          <el-row>
            <el-col :span="12" v-for="(item, index) in shipPSCLabel" :key="index">
              <el-form-item :label="item.label" :prop="item.key">
                <span>{{handleData(item.key, shipPSCInfo[item.key])}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="border-top: none;">
            <el-col :span="12">
              <el-form-item label="备注" prop="REMARK">
                <span>{{handleData('REMARK', shipPSCInfo['REMARK'])}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </el-dialog>

  <!-- 船舶历史进出港 -->
  <el-dialog title="" :visible.sync="shipHistryInOutPortDialog" width="80%">
    <div class="refine_createteam">
      <h2 class="titleblue">船舶历史进出港</h2>
      <div class="dialog_content">
        <el-table :data="shipHistryInOutPortData" maxHeight="600" border style="width: 100%">
          <el-table-column v-for="(item, index) in InOutPortData" :key="index" align="center" :fixed="!index" :prop="item.key" :label="item.label" :min-width="item.width"></el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>

  <!-- 危险品 -->
  <el-dialog title="" :visible.sync="dangerousGoodsDialog" width="80%">
    <div class="refine_createteam">
      <h2 class="titleblue">危险品申报情况</h2>
      <div class="dialog_content">
        <el-tabs v-model="dangerousGoodstabs" type="card" @tab-click="">
          <el-tab-pane label="危防货报液体散装" name="first">
            <el-table :data="dangerousGoodsData1" maxHeight="600" border style="width: 100%">
              <el-table-column v-for="(item, index) in dangerousGoods" :key="index" align="center" :fixed="!index" :prop="item.key" :label="item.label" :min-width="item.width">
                <template slot-scope="scope">
                  <span>{{handleData(item.key, scope.row[item.key])}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="危防货报固体散装" name="second">
            <el-table :data="dangerousGoodsData2" maxHeight="600" border style="width: 100%">
              <el-table-column v-for="(item, index) in dangerousGoods" :key="index" align="center" :fixed="!index" :prop="item.key" :label="item.label" :min-width="item.width">
                <template slot-scope="scope">
                  <span>{{handleData(item.key, scope.row[item.key])}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="危防货报包装货物" name="third">
            <el-table :data="dangerousGoodsData3" maxHeight="600" border style="width: 100%">
              <el-table-column v-for="(item, index) in dangerousGoods" :key="index" align="center" :fixed="!index" :prop="item.key" :label="item.label" :min-width="item.width">
                <template slot-scope="scope">
                  <span>{{handleData(item.key, scope.row[item.key])}}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>
  </el-dialog>
</div>
